<template>
  <div class="cms-views-container bg-[#f6f8fb] h-[667px] overflow-hidden atlas-detail-pages">
    <CmsTopFunction :type="1" />
    <div class="px-4 mt-4">
      <div v-for="(item, index) in 3" :key="index" class="article_shadow h-[400px] mb-4">
        <img :src="novelIcons.atlas" alt="" class="img-show" />
      </div>
    </div>
    <div class="mask-box" v-if="type === 2"></div>
    <div class="absolute bottom-0 left-0" v-if="type === 2">
      <CmsBuyOrder :type="2" noHeader />
    </div>
  </div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'
import CmsComponents from '@cms/components'
import novelIcons from '../assets/novel'
import type { ComponentKeys } from '@cms/h5-editor'
const { CmsBuyOrder, CmsTopFunction } = CmsComponents

withDefaults(defineProps<{ type: number; select?: ComponentKeys | undefined }>(), { type: 1 })

const emit = defineEmits<{
  (event: 'select', key: ComponentKeys): void
}>()

const handleClick = (key: ComponentKeys) => {
  emit('select', key)
}
</script>

<style scoped lang="less">
.atlas-detail-pages {
  .mask-box {
    @apply w-full h-full absolute top-0 left-0 right-0;
    background: rgba(0, 0, 0, 0.3);
  }
}
</style>
